<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/commons/global.jsp" %>
<!DOCTYPE html>
<html>
    <head>
        <%@ include file="/commons/basejs.jsp" %>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>关联产品</title>
        <script>

            $(function(){
                $('#easyui-calendar-div-p').hide();

            });

            function prouctSearch() {
                var queryParams = {sellerName:$("#autocomplete-ajax-shop-search-p").val(),productName:$("#autocomplete-ajax-product-search-p").val()};

                var options = $("#productDataGrid").datagrid('getPager').data("pagination").options;
                options.pageNumber = 1;
                //重新加载
                $("#productDataGrid").datagrid('options').url = "${path}/product/productList.do";
                $("#productDataGrid").datagrid('options').queryParams = queryParams;
                $("#productDataGrid").datagrid('reload');
            }

            var currentYear = 0;
            var currentMoth = 0;

            //左侧点击事件
            function onClickProduct(index, row) {
                var currDate = new Date();
                var y = currDate.getFullYear();
                var m = currDate.getMonth() + 1;
                var myMonth = formatDate(new Date(), "yyyy-MM");
                $("#searchDate").val(myMonth);
                relatedProuctSearch(y,m);
            }

            //查询
            function queryAp(){

                var qdate = $("#searchDate").val();
                var ym = qdate.split("-");
                console.log("queryAp");
                relatedProuctSearch(ym[0],ym[1]);
            }

            var selectSellerId;
            var selectDate;
            //日期设置
            function setAp(){
                console.log("--setAp--selectDate:"+selectDate)
                $.modalDialog({
                    title : '设置',
                    width : 500,
                    height : 300,
                    id:'setAppointmentPage',
                    href : '${path }/sellerAppointment/setAppointmentPage.do?selectSellerId='+selectSellerId+"&selectDate="+selectDate,
                    buttons : [ {
                        text : '确定',
                        handler : function() {
                            var f =$.modalDialog.handler.find('#setAppointmentForm');
                            f.submit();
                        }
                    } ]
                });
            }



            function relatedProuctSearch(year,month) {
                var select = $("#productDataGrid").datagrid("getSelected");
                selectSellerId = select.id;
                $('#easyui-calendar-div-p').show();
                $("#easyui-calendar-div").find(".calendar-header").css("display", "none");
                $.post("/sellerAppointment/appointmentInfo.do",{"sellerId":select.id,"searchYear":year,"searchMonth":month},function (data) {
                    console.log("data:"+data);
                    console.log("year:"+data["date"]["year"]);
                    console.log("year:"+data["date"]["month"]);
                    $('#easyui-calendar-div').calendar(
                        {
                            width : 700,
                            height : 700,
                            disabled : true,
                            year : year,
                            month : month,
                            onSelect: function(date){
                                selectDate = date.getFullYear()+"-"+(date.getMonth()+1>9?date.getMonth()+1:""+date.getMonth()+1)+"-"+(date.getDate()>9?date.getDate():"0"+date.getDate());
                                console.log("selectDate:"+selectDate);
                            },
                            formatter : function(date) {
                                var y = date.getFullYear();
                                var m = date.getMonth() + 1;
                                var d = date.getDate();
                                if(m != data["date"]["month"] ){
                                    return "";
                                }
                                var dateStr = y + '-'
                                    + (m < 10 ? ('0' + m) : m)
                                    + '-'
                                    + (d < 10 ? ('0' + d) : d);
                                var opts = $(this).calendar('options');
                                var returnStr = "";
                                for (var i=0;i<data["infoList"].length;i++){
                                    if (dateStr == data["infoList"][i]["appointment_date"]) {
                                        returnStr += '<div>总数:'
                                            + data["infoList"][i]["num"]
                                            + '</div>' + '<div>已预约:'
                                            + data["infoList"][i]["use_num"]
                                            + '</div>' + '<div>剩余:'
                                            + data["infoList"][i]["residual_num"]
                                            + '</div>';
                                        break;
                                    }
                                }
                                if(returnStr == ""){
                                    returnStr += '<div>' + d
                                        + '</div>' + '<span style="color:red">未设置</span>';
                                }else{
                                    returnStr =  '<div>' + d
                                        + '</div>' + returnStr;
                                }
                                return returnStr;
                            }
                        });

                });

            }




        </script>
    </head>
    <body>
    <div class="easyui-layout" fit="true">
        <div data-options="region:'west',split:true,border:false" title="商家列表" style="width:45%;">

            <table id="productDataGrid"class="easyui-datagrid"
                data-options="
                url:'${path}/seller/sellerList.do',
                fit:true,
                idField:'id',
                fitColumns: true,
                rownumbers:true,
                toolbar:'#search_tools_p',
                pagination:true,
                singleSelect:true,
                <%--nowrap:false,--%>
                width:$(this).width() * 0.1,
                onClickRow:onClickProduct
                ">
                <thead>
                <th data-options="field:'id', align:'center'">ID</th>
                <th data-options="field:'sellerName', align:'center',width:150">商家</th>
                </thead>
            </table>
            <div id="search_tools_p">
                商家:
                <div style="position: relative;display: inline;" >
                    <input type="hidden" name="autocomplete-shop-search" id="autocomplete-shop-search-p" value="" />
                    <input type="text" id="autocomplete-ajax-shop-search-p" style="position: absolute; z-index: 2; background: transparent;" value=""/>
                    <input type="text" id="autocomplete-ajax-x-shop-search-p" disabled="disabled" style="color: #CCC; position: absolute; background: transparent; z-index: 1;" value=""/>
                </div>

                <div style="position: relative;display: inline;margin-left: 200px">
                    产品:
                    <input type="hidden" name="autocomplete-product-search" id="autocomplete-product-search-p" value="" />
                    <input type="text" id="autocomplete-ajax-product-search-p" style="position: absolute; z-index: 2; background: transparent;" value=""/>
                    <input type="text" id="autocomplete-ajax-x-product-search-p" disabled="disabled" style="color: #CCC; position: absolute; background: transparent; z-index: 1;" value=""/>
                </div>

                <div style="position: relative;display: inline;margin-left: 200px">
                    <input type="button" class="easyui-linkbutton " value="重置" onclick="resetProuctSearch();"/>
                    &nbsp;
                    <input type="button" class="easyui-linkbutton" value="搜索" onclick="prouctSearch();"/>
                </div>

            </div>

        </div>
        <div data-options="region:'center',split:true,border:false" title="预约列表" style="width:55%;">
            <div id="easyui-calendar-div-p" style="width:100%;height:100%">
                <div id="buyQuantity_tools" style="text-align:center;margin-top:20px;margin-bottom:20px;">
                    <lable for="datetime">月份选择:</lable>
                    <input class="Wdate" type="text" id="searchDate" name="searchDate" style="width: 200px" onFocus="WdatePicker({isShowClear:false,readOnly:true,dateFmt:'yyyy-MM'})" />&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="queryAp();">查询预约</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="setAp();">设置预约</a>
                </div>
                <div class="easyui-calendar" id="easyui-calendar-div"  style="margin: 0 auto"></div>
            </div>
        </div>
    </div>
    </body>
</html>
